<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>cbb-图片背景修改</title>
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="stylesheet" href="src/css/index.css">
  <script src="src/js/index.js"></script>

</head>


<body>

  <!-- 图片加载中的动画，纯css+html写的 -->
  <div id="mask">
    <div class="loadingText">加载中</div>
    <div class="loading"><div></div></div>
  </div>

  <div class="content">
    <div class="bar">
      <div>【画布缩放：<span id="proportion">100</span>】</div>

      <div>
        背景颜色：<input type="color" id="switchColor" oninput="switchColorEvent()" value="#4D909D">
      </div>
      <div class="wh-box">
        <div>
          宽：<input id="canvasW" type="number" value="1920" onchange="changeSizeEvent()">px
          <br>
          高：<input id="canvasH" type="number" value="1080" onchange="changeSizeEvent()">px
        </div>
        <button onclick="exchangeEvent()">交换</button>
      </div>
      
      <div>
        照片比例：
        <input id="photoScale" type="number" value="183" onchange="photoScaleEvent()">%
      </div>

      <div>
        <input type="checkbox" id="autoResetPP" checked>
        <label for="autoResetPP">自动重置照片位置</label>
      </div>

      <div>
        选择背景图片：<input type="file" id="backImg" onchange="setBackgrountImage()">
      </div>

      <button onclick="initPhoto(true)">重置照片位置</button>

      <button onclick="exportImgEvent()" download>导出图片</button>
    </div>


    <div class="canvas-box" id="canvasBox">

        <canvas id="canvas">您的浏览器不支持canvas，请升级</canvas>
        <canvas id="imgCanvas"></canvas>

        <!-- 支持jpg,png,svg等图片，推荐svg -->
        <img id="photo" class="image" src="src/img/image.svg" hidden ondragstart="dragstartEvent(event)" ondrag="dragEvent(event)">
    </div>
  </div>
</body>


</html>